<template>
  <div class="main-container">
    <div class="operation-left">

      <!-- 生产通知卡片列表 -->
      <div class="notice-cards-panel">
        <template v-for="(notice, index) in noticeList">
          <div class="notice-card" :key="notice.noticeNumber" @click="getNoticeProducts(notice, index)" :style="backColors[index]">
            <el-progress type="dashboard" :percentage="notice.percent" color="#1989fa" class="mt20" :width="75"></el-progress>
            <p class="text">
              <b>{{ notice.noticeNumber }}</b>
            </p>
            <p class="text">{{ notice.workingNumber }}</p>
            <p class="text">{{ notice.orderUnit }}</p>
          </div>
        </template>
      </div>
    </div>

    <div style="overflow-y: auto">
      <!-- 通知单基础信息 -->
      <el-form class="p-10h-88percent mt10">
        <el-row class="mb10">
          <label class="bold pl10">基础信息</label>
          <div class="ml10 inline-label mr10 fontSize12">{{ noticeBasic.noticeNumber || '通知单号' }}</div>
          <div class="inline-label mr10 fontSize12">{{ noticeBasic.orderUnit || '订货单位' }}</div>
          <div class="inline-label mr10 fontSize12">{{ noticeBasic.workingNumber || '产品工号' }}</div>
          <div class="inline-label mr10 fontSize12">{{ noticeBasic.remark || '备注' }}</div>
        </el-row>
      </el-form>
      <!-- 通知单产品信息 -->
      <el-table border stripe :data="productList" row-key="producingId" @row-dblclick="distributeRow" default-expand-all>
        <el-table-column align="left" width="40"></el-table-column>
        <el-table-column prop="sequenceId" label="序列号" align="center" width="70"></el-table-column>
        <el-table-column prop="drawingNumber" label="图号" align="center" width="150"></el-table-column>
        <el-table-column prop="productName" label="品名" align="center" width="150"></el-table-column>
        <el-table-column prop="materialQuality" label="材质" align="center" width="150"></el-table-column>
        <el-table-column prop="number" label="数量" align="center" width="100"></el-table-column>
        <el-table-column prop="deliveryDate" label="交货日期" sortable align="center" width="150"></el-table-column>
        <el-table-column prop="finishedNumber" label="完工数量" align="center" width="85"></el-table-column>
        <el-table-column prop="workingNumber" label="在产数量" align="center" width="85"></el-table-column>
        <el-table-column prop="pendingNumber" label="待处理数量" align="center" width="100"></el-table-column>
        <el-table-column prop="waitingNumber" label="未投产数量" align="center" width="100"></el-table-column>
        <el-table-column prop="state" label="状态" sortable align="center" width="100"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center" min-width="150"></el-table-column>
        <el-table-column v-if="$checkAuth('创建派工单')" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button @click="distributeRow(scope.row)" type="text" icon="el-icon-s-order" size="small" :disabled="!dispatchState.includes(scope.row.state)">派工</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'

const vuexDispatch = namespace('ThreeDispatch')
const vuexNotice = namespace('NewNotice')
const vuexDispatchDetail = namespace('DispatchDetail')
@Component({
  components: {
    Layout
  }
})
export default class Index extends Vue {
  //通知单进入
  @vuexDispatch.State noticeList: any
  @vuexNotice.State productList: any
  @vuexNotice.Action GET_NOTICE_DETAIL: any
  @vuexDispatch.Action GET_ALL_DISPATCH: any
  @vuexDispatchDetail.Mutation setProducingId
  noticeBasic: any = {
    orderUnit: '订货单位',
    noticeNumber: '通知单号',
    workingNumber: '产品工号',
    remark: '备注'
  }
  dispatchState: string[] = ['待派工', '生产中']
  // 通知单卡片选中时背景颜色改变
  backColors: any = []
  /**
   * 生产周期函数
   */
  created() {
    this.GET_ALL_DISPATCH() // 生产派工数据
  }

  /**
   * 获取通知单产品列表
   */
  getNoticeProducts(data, index) {
    // 调整选中卡片的背景
    this.backColors = []
    for (let i = 0; i < this.noticeList.length; i++) {
      let color = i == index ? '#ADD8E6' : '#fff'
      this.backColors.push('background-color:' + color + ';')
    }
    this.noticeBasic.noticeNumber = data.noticeNumber
    this.noticeBasic.orderUnit = data.orderUnit
    this.noticeBasic.workingNumber = data.workingNumber
    this.noticeBasic.remark = data.remark
    this.getProductList(data.noticeId)
  }
  async getProductList(noticeId) {
    let result = await this.GET_NOTICE_DETAIL({ noticeId: noticeId })
    if (result) {
      console.log(this.productList)
    }
  }

  /**
   * 产品派工
   */
  distributeRow(row) {
    this.setProducingId(row.producingId)
    this.$router.push({
      name: 'dispatch-details',
      params: {
        from: 'notice-cards',
        noticeNumber: this.noticeBasic.noticeNumber,
        workingNumber: this.noticeBasic.workingNumber
      }
    })
  }

  bindRowId(row: any) {
    console.log('绑定产品行派工按钮的ID')
    console.log(row.drawingNumber)
    console.log('绑定的ID：')
    let btnId = 'btnD1' + this.noticeBasic.noticeNumber + '-' + row.drawingNumber
    console.log(btnId)
    return btnId
  }
}
</script>

<style lang="scss" scoped>
// 通知单卡片区域
.notice-cards-panel {
  display: -webkit-box;
  overflow-x: auto;
  .notice-card {
    float: left;
    width: 160px;
    color: #000;
    height: 185px;
    line-height: 25px;
    text-align: center;
    margin-right: 30px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    .text {
      letter-spacing: 2px;
      font-size: 14px;
      color: #000;
    }
  }
  .notice-card:hover {
    cursor: pointer;
  }
}
/********** */
.order {
  // float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  border-radius: 15px;

  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
      color: #000;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.s1 {
  overflow-y: auto;
}
//通知单滚动
//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}
.breadcrumb {
  height: 25px;
  width: 100%;
  border: none;
}
.notice-item {
  height: 270px;
}

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}
.layout .operation {
  overflow-x: auto;
}

.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>
